<template>
    <div id="box">
        <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <!-- 直接显示 -->
        <div id="viewerContainer" class="viewerContainer" ref="containerRef">
            <div id="viewer" class="pdfViewer"></div>
        </div>
        <!-- <div :style="{ width: pdf_div_width, margin: '0 auto' }" @touchstart="touchstart" @touchmove="touchmove"
            @touchend="touchend">
            <canvas v-for="page in pdf_pages" :id="'the_canvas' + page" :key="page"></canvas>
        </div> -->
    </div>
</template>

<script>

export default {
    name: '',
    components: {
    },
    data() {
        return {
            keyword: '',
            newViewer: {},
            currentScale: 1,
            pdf_pages: [1],
            pdf_div_width: '',
            pdfDoc: {},
            searcher: {
                phraseSearch: true, // 是否短语查找
                query: "", // 查询字段
                findPrevious: undefined, // 是否循环查找
                highlightAll: true, // 是否高亮
                caseSensitive: false, // 区分大小写
                entireWord: false, // 整个单词
            }
        }
    },
    created() {
    },
    mounted() {
        this.loadPdf('https://zhikujiapu.oss-cn-hangzhou.aliyuncs.com/linandifangwenxianshujukuxitongoss-01_02_01_00009_%E4%B8%B4%E5%AE%89%E5%B9%B4%E9%89%B41994-01_02_01_00009_%E4%B8%B4%E5%AE%89%E5%B9%B4%E9%89%B41994-25.pdf')
    },
    methods: {
        search() {
            this.searcher.query = this.keyword;
            console.log('this.newViewer', this.newViewer, this.searcher)
            this.newViewer.findController.executeCommand("find", this.searcher);
            console.log('this.newViewer.container', this.newViewer.container)
            this.$message('搜索成功');
        },
        /*加载PDF文件*/
        loadPdf(url) {
            const linkService = new PDFLinkService();
            const findController = new PDFFindController({
                linkService,
            });
            let _this = this;
            // PDFSinglePageViewer 单页控制器
            // PDFViewer 多页控制器
            const newViewer = new PDFViewer({
                container: _this.$refs.containerRef, // 显示PDF的容器dom
                linkService, // 不懂但必须
                useOnlyCssZoom: true, // 否可以通过css控制页面的缩放,默认 false
                textLayerMode: 1, // 显示文字类型 渲染文字图层
                // renderer:'svg', // 用什么方式渲染 可选canvas和svg
                findController, // 文字查找控制器
            });
            linkService.setViewer(newViewer);
            // 缩放
            newViewer._currentScale = this.currentScale;
            console.log('newViewer', newViewer)

            // newViewer._currentScaleValue = 0.5; // 无效 暂且不知道为什么
            // newViewer.container.style.scale = 0.5
            pdfjs.getDocument(url).promise.then((pdf) => {
                // let viewport = pdf.getViewport({ scale: this.currentScale });
                // canvas.width = viewport.width * ratio;
                // canvas.height = viewport.height * ratio;
                // canvas.style.width = viewport.width + 'px';
                // that.pdf_div_width = viewport.width + 'px';
                // canvas.style.height = viewport.height + 'px';
                // ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
                // let renderContext = {
                //     canvasContext: ctx,
                //     viewport: viewport,
                // };
                // pdf.render(renderContext);


                if (pdf) {
                    // 总页数
                    _this.numPages = pdf.numPages;
                    newViewer.setDocument(pdf);
                    linkService.setDocument(pdf);
                    // 全局的newViewer
                    _this.newViewer = newViewer;
                    // _this.newViewer.currentScaleValue = '0'; // 无效 暂且不知道为什么

                    // 判断是否已经渲染完毕
                    _this.interval = setInterval(() => {
                        // _this.loadCompletePdf();
                    }, 100);
                    this.$nextTick(() => {
                        this._renderPage(1);
                    });
                    this.pdfDoc = pdf;

                    // setTimeout(() => {
                    //     this.newViewer.findController.executeCommand("find", this.searcher);
                    // }, 1000);
                }
            });
        },
        _renderPage(num) {
            const that = this;
            this.pdfDoc.getPage(num).then((page) => {
                let canvas = document.getElementById('the_canvas' + num);
                let ctx = canvas.getContext('2d');
                let dpr = window.devicePixelRatio || 1;
                let bsr =
                    ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio ||
                    1;
                let ratio = dpr / bsr;
                let viewport = page.getViewport({ scale: this.currentScale });
                canvas.width = viewport.width * ratio;
                canvas.height = viewport.height * ratio;
                canvas.style.width = viewport.width + 'px';
                that.pdf_div_width = viewport.width + 'px';
                canvas.style.height = viewport.height + 'px';
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
                let renderContext = {
                    canvasContext: ctx,
                    viewport: viewport,
                };
                page.render(renderContext);

                if (this.pdf_pages > num) {
                    this._renderPage(num + 1);
                } else {
                    this.renderMode = true;
                }
            });
        },
        touchstart(e) {
            console.log('touchstart');
            this.startTime = this._getTime();
            this.startX = e.touches[0].pageX;
            this.startY = e.touches[0].pageY;
            if (e.touches.length > 1) {
                let point1 = e.touches[0];
                let ponit2 = e.touches[1];
                let xLen = Math.abs(ponit2.pageX - point1.pageX);
                let yLen = Math.abs(ponit2.pageY - point1.pageY);
                this.touchDistance = this._getDistance(xLen, yLen);
                console.log('touchDistance', this.touchDistance);
            }
        },
        touchmove(e) {
            console.log('touchmove');

            this.moveX = e.touches[0].pageX;
            this.moveY = e.touches[0].pageY;
            this.eLen = e.touches.length;
            if (this.eLen > 1) {
                let point1 = e.touches[0];
                let ponit2 = e.touches[1];
                let xLen = Math.abs(ponit2.pageX - point1.pageX);
                let yLen = Math.abs(ponit2.pageY - point1.pageY);
                let distance = this._getDistance(xLen, yLen);
                if (this.touchDistance) {
                    let pinchScale = distance / this.touchDistance;
                    this.previousPinchScale = pinchScale > 1 ? pinchScale : 1;
                    console.log('previousPinchScale', this.previousPinchScale);
                }
            }
        },
        touchend() {
            console.log('touchend');
            let timestamp = this._getTime();
            if (
                (this.moveX !== null && Math.abs(this.moveX - this.startX > 0)) ||
                (this.moveY !== null && Math.abs(this.moveY - this.startY) > 0)
            ) {
                console.log('timeDis', timestamp - this.startTime);
                if (timestamp - this.startTime < 1000 && this.eLen > 1) {
                    console.log('zoom-start');
                    if (this.previousPinchScale > 1) {
                        this.zoomIn();
                    } else {
                        this.zoomOut();
                    }
                }
                this.eLen = 0;
            }
        },
    },
}
</script> 

<style scoped></style>
